<template>
  <div class="backStack-issue-wrap">
    <UserInfos ref="userInfos" :infos="formInfo"></UserInfos>
    <div class="backStack-detail-footer-wrap" :style="{ background: demandStatusOpt.background, border: demandStatusOpt.border }">
      <a-row :gutter="[25, 14]">
        <a-col :span="4">
          <span class="label" >状态：</span>
        </a-col>
        <a-col :span="20">
          <span :style="{color: demandStatusOpt.color}">{{demandStatusOpt.text}}</span>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import UserInfos from '../../components/userInfos/index.vue'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import { formInfo } from './configs/formOptions.js'
import { getDataStatisticsDetail } from '@/api/dataStatistics'

export default {
  mixins: [mixinsBackStack],
  data() {
    return {
      loading: true,
      formInfo,
      auditStatus: {
        '0': {
          background: '#F8F9FA',
          color: '#333',
          text: '未发布'
        },
        '1': {
          background: '#deeefe',
          border: '1px solid #65B1FF',
          color: '#2279D2',
          text: '已发布'
        },
        '2': {
          background: '#F8F9FA',
          color: '#333',
          text: '已下架'
        }
      },
      demandStatusOpt: '-'
    }
  },
  components: {
    UserInfos
  },
  created() {
    this.initSetting()  // 初始化默认配置
  },
  methods: {
    // 初始化数据
    async initSetting() {
      const {id} = this.$route.query
      const { data } = await getDataStatisticsDetail(id)
      this.handlerResultMappings([data]) // 处理数据的映射关系
      this.handlerRichText(data)
      this.handlerFileAndImg(data)  // 处理附图和附件
      this.dealInfo('formInfo', data)
      const {status} = data
      this.demandStatusOpt = this.auditStatus[status]
    },
    // 处理静态信息
    dealInfo(type, result) {
      if(!result) return
      if(!this[type]) return
      this[type].forEach(item => {
        const {key} = item
        const v = result[key] || '-'
        item.value = v
      })
    },
    // 处理附件和附图的数据
    handlerFileAndImg(data) {
      const { files } = data
      if (files && files.length > 0 && files[0]) {  //防止出现[null]情况
        const annexesList = files.reduce((pre,cur)=>{
          if(cur){
            const { filePath, fileName } = cur
            pre.push(`<p><a href="${filePath}" target="view_window">${fileName}</a></p>`)
          }
          return pre
        },[])
        data.files = annexesList.join('').toString()
      } else {
        data.files = '-'
      }
    },
    // 处理富文本
    handlerRichText(result) {
      const key1 = 'content'
      const key2 = 'section'
      Object.keys(result).forEach(key => {
        const isKey1 = key.indexOf(key1) !== -1
        const isKey2 = key.indexOf(key2) !== -1
        if(isKey1 || isKey2) {
          const len = key.length
          const idx = key.slice(-1)
          const ctx = key.substring(0, len - 1)
          const k = `${idx}-${ctx}`
          result[k] = result[key]
        }
      })
      return result
    },
  }
}
</script>
